<template>
    <div class="order-main">
        <section class="order-main-header">
             <mt-header title="我的挂单">
            <mt-button  icon="back" slot="left" @click="handleClose()"></mt-button>
            </mt-header>
           
        </section>
        <div class="container">
            <div class="nav">
                <mt-button  v-bind:class="active=='tab-container1'?'active':''" size="small" @click="changeActive('tab-container1')">进行中</mt-button>
            <!--<mt-button size="small" @click="active = 'tab-container1'">tab 1</mt-button>-->
                <mt-button v-bind:class="active=='tab-container2'?'active':''" size="small" @click="changeActive('tab-container2')">已完成</mt-button>
                <mt-button v-bind:class="active=='tab-container3'?'active':''" size="small" @click="changeActive('tab-container3')">已取消</mt-button>
            </div>
             <div class="page-tab-container" >
            <mt-tab-container class="page-tabbar-tab-container content" v-model="active"  value="tab-container1">
                <mt-tab-container-item id="tab-container1" >
                    <div v-if="MyDealOrdesList.length>0">
                        <div class="order-table" v-for="(orderData, i) in MyDealOrdesList" v-bind:key="i" >
                            <div class="order-header">
                                <div class="flex-between black">
                                    <span v-if="orderData.type == 1">出售USDT</span>
                                    <span v-if="orderData.type == 0">买入USDT</span>
                                    <span>￥{{orderData.price}}CNY</span>
                                </div>
                            </div>
                            <div class="order-content flex-between">
                                <div class="left">
                                    <p>时间：{{ timestampToTime(new Date(orderData.createTime))}}</p>
                                    <p>总价：{{filter(orderData.price*orderData.amount)}}CNY</p>
                                    <p>已成交：{{orderData.successAmount}}/{{orderData.amount}} USDT</p>
                                </div>
                                <div class="right flex-center">
                                    <button v-on:click="canOrder(orderData.id)" class="upper submit start"   id="submit">撤单</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-if="MyDealOrdesList.length==0" class="data-img">
                        <img src="../../assets/noData.png">
                        <p>暂无市场挂单</p>
                    </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="tab-container2">
                    <div v-if="MyDealOrdesList.length>0">
                        <div class="order-table" v-for="(orderData, i) in MyDealOrdesList" v-bind:key="i" >
                              <div class="order-header">
                                <div class="flex-between black">
                                    <span v-if="orderData.type == 1">出售USDT</span>
                                    <span v-if="orderData.type == 0">买入USDT</span>
                                    <span>￥{{orderData.price}}CNY</span>
                                </div>
                            </div>
                            <div class="order-content flex-between">
                                <div class="left">
                                    <p>时间：{{ timestampToTime(new Date(orderData.createTime))}}</p>
                                    <p>总价：{{filter(orderData.price*orderData.amount)}}CNY</p>
                                    <p>已成交：{{orderData.successAmount}}/{{orderData.amount}} USDT</p>
                                </div>
                                <div class="right flex-center">
                                    <button  class="upper submit "   id="submit">已完成</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-else class="data-img">
                        <img src="../../assets/noData.png">
                        <p>暂无市场挂单</p>
                    </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="tab-container3" >
                     <div v-if="MyDealOrdesList.length>0">
                        <div class="order-table" v-for="(orderData, i) in MyDealOrdesList" v-bind:key="i" >
                             <div class="order-header">
                                <div class="flex-between black">
                                    <span v-if="orderData.type == 1">出售USDT</span>
                                    <span v-if="orderData.type == 0">买入USDT</span>
                                    <span>￥{{orderData.price}}CNY</span>
                                </div>
                            </div>
                            <div class="order-content flex-between">
                                <div class="left">
                                    <p>时间：{{ timestampToTime(new Date(orderData.createTime))}}</p>
                                    <p>总价：{{filter(orderData.price*orderData.amount)}}CNY</p>
                                    <p>已成交：{{orderData.successAmount}}/{{orderData.amount}} USDT</p>
                                </div>
                                <div class="right flex-center">
                                    <button  class="upper submit "   id="submit">已撤单</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-else class="data-img">
                        <img src="../../assets/noData.png">
                        <p>暂无市场挂单</p>
                    </div>
                </mt-tab-container-item>
            </mt-tab-container>
        </div>
        </div>
    </div>
</template>
<script>
import { Toast } from 'mint-ui';
import { MessageBox } from 'mint-ui';
export default {
    name:'myOrder',
    data(){
         return {
             list:[1,2,3,4,5,6],
             orderTabs:1, active: "tab-container1",
             MyDealOrdesList:[],
             fid:''
         }
    },
   
    mounted() {
        this.getOtcList(0);
    },
    methods: {
         getOtcList(){
       this.$http.post('v1/getOtcList?', {page: 1,pageSize: 10}).then((res) => {
           let data=res.data;
            if (data.code == 200) {
                    for (var i = 0; i < data.data.length ; i++) {
                        if(data.data[i].fShortName=="OMNI-USDT"){
                            this.fid=data.data[i].fid;
                        }
                    }
            }
            this.getMyDealOrdes(this.fid,0)
      })
    },
        getMyDealOrdes(cid,status){
            this.$http.post('v1/listMyOtcOrders', {
                                cid: cid,status:status,
                                page: 1,
                                pageSize: 10
                            },).then((res)=>{
              this.MyDealOrdesList=res.data.data;
            })
         },
         canOrder(id){
             MessageBox.confirm("提示", '确定撤销此订单？');
             MessageBox.confirm('确定撤销此订单？').then(action => {
                 this.$http.post('/v1/account/cancelMyOtcOrder',{id: id},).then((data)=>{
                                                if(data.data.code==200){
                                                    Toast({
                                                message: '撤单成功',
                                                iconClass: 'icon icon-success'
                                                });
                                                  this.getMyDealOrdes(this.fid,0)
                                                }else if( data.data.code==3){
                                                      Toast({
                                                message: '该挂单有正在处理的交易，请先完成',
                                                iconClass: 'icon icon-success'
                                                });
                                                }else if(data.data.code==5 ){
                                                        Toast({
                                                message: '账户资金异常，请主动联系平台',
                                                iconClass: 'icon icon-success'
                                                });
                                }
                })
        });
                
         },
        tabOrder(data){
            this.orderTabs=data
        },
         changeActive(id){
                this.active = id;
                if(this.active=="tab-container1"){
                      this.getMyDealOrdes(this.fid,0)
                  
                }else  if(this.active=="tab-container2"){
                        this.getMyDealOrdes(this.fid,1)
                }else  if(this.active=="tab-container3"){
                        this.getMyDealOrdes(this.fid,2)
                }
                            console.log(this.MyDealOrdesList)
            },
            handleClose(){
                this.$router.go(-1);
            },
            filter(res){
            return res.toFixed(2)
        }, 
                  timestampToTime (cjsj) {
        var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
        var D = date.getDate() + ' '
        var h = date.getHours() + ':'
        var m = date.getMinutes() + ':'
        var s = date.getSeconds()
        return Y+M+D+h+m+s
        console.log(timestampToTime (1533293827000))
    },
    },
}
</script>
<style >
.order-main .sell{
width: 50%;
height: 100px;
line-height: 100px;
text-align: center;
}
.order-main-header{
    display: flex;
    height: 100px;
    flex-direction: row;
}

.page-tab-container{
    height: 100%;
}
.data-img{
        min-height: 850px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}
.data-img img{
     width: 120px;
    height: 120px;
}
.order-content .left{
    color: #E0E0F9
}
.order-header{
    height: 80px;
    line-height: 80px;
    border-bottom:1px solid #161736
}
.rect{
    height:10px;
    background:rgba(244,244,244,1);
}
.order-content{
    padding-top: 20px;
}
.order-main .left p{
    height: 40px;
    font-size: 24px;
}
.nav{
    display: flex;
    flex-direction: row;
}
.black{
    color: #E0E0F9;
    font-weight:600;
    font-size:32px;
}
.flex-center{
    display: flex;
   align-self: center;
}
.flex-between{
      display: flex;
        justify-content: space-between;
    }
    .end{
        background: #8c9fad
    }
    .start{
          background:#F2635B;
    }
    .submit {
    width: 120px;
    height: 68px;
    font-size: 28px;
    line-height: 68px;
    font-weight: 700;
    color: #fff;
    border-radius:5px;
}
.order-table{
    padding: 20px 30px 20px 30px;
    background: #222240;
    position: relative;
    margin-bottom: 20px;
}
.tabs .img{
    width: 40px;
    height: 40px;
    position: relative;
    right: 20px;
    top:30px;
}
.order-main .buy{
width: 50%;
height: 100px;
line-height: 100px;
text-align: center;
}
.order-main .buy span{
text-align: center;
width: 50%;
line-height: 100px;
height: 90%;
}
.flex-content{
      display: -ms-flexbox;
    display: flex;
    justify-content: center;
}
.order-main .sell span{
width: 50%;
height: 90%;
line-height: 100px;
}
.tab-content{
    width: 80%;
    margin: 0 auto;
    font-size: 32px;
    font-weight:500;
}
.order-main .tab{
display: flex;
background:rgba(255,255,255,1);
height: 100px;
border-bottom:1px solid #161736
}
.order-main .active{
color: #3381FF;
}
.mint-header{
    height: 100px;
    font-size: 32px;
    background-color: #161736;
    color: #E0E0F9
}
.data-img p{
color: #fff;
}
</style>